<template>
  <scroll-view class="album-container" scroll-y @scrolltolower='handlescrolltolower'>
    <view class="album-swiper">
      <swiper indicator-dots autoplay circular>
        <block v-for="item in banner" :key="item.id">
          <swiper-item>
            <image :src="item.thumb" />
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="album-group">
      <block v-for="item in album" :key="item.id">
      <navigator class="album-item" :url="'/pages/album/index?id='+item.id">
        <view class="album-item-img">
          <image :src="item.cover" mode="aspectFill"></image>
        </view>
        <view class="album-item-info">
          <view class="album-name">{{item.name}}</view>
          <view class="album-desc">{{item.desc}}</view>
          <view class="album-btn">
            <view>关注</view>
          </view>
        </view>
      </navigator>
      </block>
    </view>
  </scroll-view>
</template>

<script>
import { getAlbumList } from "../../../network/home.js";

export default {
  mounted() {
    uni.setNavigationBarTitle({ title: "专辑" });
    this.__getAlbumList();
  },
  data() {
    return {
      banner: [],
      params: {
        //	获取多少条数据
        limit: 30,
        //	关键字 “hot”
        order: "hot",
        //	跳过多少条
        skip: 0
      },
      album: []
    };
  },
  methods: {
    // =============== 发送网络请求 ================
    async __getAlbumList() {
      const res = await getAlbumList({
        data: this.params
      });
     if(this.banner.length  === 0) {
      this.banner = res.res.banner;
     }
      this.album = [...this.album,...res.res.album];
    },
    // =============== 事件监听 ====================
    handlescrolltolower() {
      this.params.skip+= this.params.limit;
      this.__getAlbumList()
    }
  }
};
</script>

<style scoped lang='scss'>
.album-container {
  height: calc(100vh - 36px);
}
.album-swiper {
  swiper {
    height: calc(750rpx / 2.3) !important;
    image {
      height: 100%;
    }
  }
}

.album-group {
  padding: 10rpx;
  .album-item {
    display: flex;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #ccc;
    .album-item-img{
      flex:2;
      padding-right: 40rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
    .album-item-info{
      flex:5;
      overflow: hidden;
      .album-name {
        padding-left: 20rpx;
        font-size: 28rpx;
        font-weight: 700;
        
      }
      .album-desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 20rpx 0;
      }

      .album-btn {
        display: flex;
        justify-content: flex-end;
        view {
          color: $themeColor;
          padding: 10rpx;
          border: 1rpx solid $themeColor;
          margin-top: 10rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>